<template>
  <div>
    <div class="tdiv" v-for="(item, index) in devices" :key="index">
      <div v-for="(item2, index2) in item" :key="index2">
        <span class="label">
          {{ item2.label }}
        </span>
        ：
        <span class="value">
          {{ item2.value }}
        </span>
        <span v-if="item2.unit">
          {{ item2.unit }}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    devices: {
        type: Array,
        default: []
    }
  },
};
</script>

<style scoped>
.tdiv:nth-child(even){
    background: #E9E9E9;
}
.tdiv {
  min-height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: space-between;
  align-items: center;
}

.tdiv > div {
  flex: 1;
}
.value {
  color: deepskyblue;
}

* {
  font-size: 15px;
}

</style>